<template>
  <div class="collect-page" >

    <div class="item-box" v-for="item in collectList" :key="item.article_id">
      <Card
        :articleId="item.article_id"
        :title="item.title"
        :content="item.content"
        :image="item.thumb_url"
        :time="item.created_at"
        :token="token"
      ></Card>
    </div>
  </div>
</template>

<script>
  import { reque } from '@/request';
  import Card from '@/components/card/index.vue'
  import Dialog from '@/wxcomponents/vant/dialog/dialog';
  import { navigateDlbMini } from '@/utils/index';
  import { getArticleCollectList } from '@/api/collect/index.js'

  export default {
    components: {
      Card
    },
    data() {
      return {
        token: '',
        collectList: []
      };
    },
    onShow() {
      this.token = wx.getStorageSync('token');
    },
    onLoad() {
      if (wx.getStorageSync('token')) {
        this.getList()
      } else {
        this.goLogin()
      }
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
    },
    methods: {
      goLogin() {
        Dialog.confirm({
          context: this,
          title: '提示',
          message: '您还未登录，是否立即前往登录？',
          confirmButtonText: '确定',
          confirmButtonColor: '#2361FF',
        })
          .then(() => {
            navigateDlbMini('/subpackages/packageForspecial/login-home/main');
          })
          .catch(() => {});
      },
      async getList () {
        const res = await getArticleCollectList()
        if (res.code == 200) {
          this.collectList = res.data
          // if (this.filterForm.page == 1) {
          //   this.collectList = res.data
          // } else {
          //   this.messageList = this.messageList.concat(res.data)
          // }
          // this.isMore = this.messageList?.length < res.total ? true : false
        }
      }
    },
  };
</script>

<style lang="less">
  .ellipsis-base(@n) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: @n;
    -webkit-box-orient: vertical;
  }
  .collect-page {
    padding: 16px;
    min-height: 100vh;
    margin-bottom: env(12px + safe-area-inset-bottom);
    background: #F4F4F4;
    box-sizing: content-box;
    .item-box {
      margin-bottom: 16px;
      // padding: 12px 18px;
      background: #fff;
      border-radius: 12px;
      box-sizing: content-box;
      .title {
        font-size: 20px;
        line-height: 28px;
        color: rgba(0, 0, 0, .85);
        .ellipsis-base(2);
      }
      .time {
        margin-top: 12px;
        width: 190px;
        font-size: 16px;
        line-height: 23px;
        color: rgba(0, 0, 0, .65);
      }
      .detail {
        margin-top: 12px;
        width: 190px;
        font-size: 16px;
        line-height: 23px;
        color: rgba(0, 0, 0, .65);
        .ellipsis-base(2);
      }
    }
  }
</style>
